<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/css/elementui.css">
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/plugins/font-awesome/css/font-awesome.min.css">
    <script type="text/javascript" src="../static/js/vue.js"></script>
    <script type="text/javascript" src="../static/js/elementui.js"></script>
    <script type="text/javascript" src="../static/js/axios.js"></script>

</head>
<body class="hold-transition">
<div id="app">
    <div class="app-container">
        <div class="box">
            <div class="filter-container">

                <!--查询条件部分  searchmap -->
                <el-form ref="form" :inline="true" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="searchMap.username" placeholder="名字"></el-input>
                    </el-form-item>

                    <!--<el-form-item label="品牌的首字母" label-width="100px">
                        <el-input v-model="searchMap.hobby"  placeholder="品牌" ></el-input>
                    </el-form-item>-->

                    <el-form-item>
                        <el-button type="primary" @click="fetchData()">查询</el-button>
                        <el-button type="primary" @click="add()">新增</el-button>
                    </el-form-item>
                </el-form>

                <!--table 展示区-->
                <template>
                    <el-table
                            :data="tableData"
                            border style="width: 100%">
                        <el-table-column
                                prop="id"
                                label="id"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="username"
                                label="用户名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="password"
                                label="密码"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="age"
                                label="年龄"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="createtime"
                                label="时间" :formatter="timeFormat">
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">    
                                <el-button  @click="edit(scope.row)" type="text" size="small"> 修改</el-button> 
                                <el-button  @click="dele(scope.row.id)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

                <div class="pagination-container">
                    <!--分页插件 -->
                    <el-pagination
                            class="pagiantion"
                            @size-change="sizeChange"
                            @current-change="fetchData"
                            :current-page.sync="searchMap.page"
                            :page-sizes="[5, 10, 15, 20]"
                            :page-size="searchMap.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>

                    <!--新增、修改编辑框-->
                    <el-dialog
                            title="编辑"
                            :visible.sync="dialogVisible"
                            width="50%">
                        <span>
                            <el-form ref="form" :inline="true" label-width="100px">
                                <el-input v-model="pojo.id" type="hidden"></el-input>
                                <el-form-item label="用户名">
                                    <el-input v-model="pojo.username" placeholder="用户名"></el-input>
                                </el-form-item>
                                <el-form-item label="密码">
                                    <el-input v-model="pojo.password"  placeholder="密码" ></el-input>
                                </el-form-item>
                                <el-form-item label="年龄">
                                    <el-input v-model="pojo.age"  placeholder="年龄" ></el-input>
                                </el-form-item>
                                <el-form-item label="时间">
                                    <el-date-picker
                                            v-model="pojo.createtime"
                                            type="date"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-form>
                        </span>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="save()">保 存</el-button>
                        </span>
                    </el-dialog>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    const gatewayUrl ="http://127.0.0.1:9001";
    const brand = new Vue({
        el:"#app",
        data(){
            return{
                tableData:[],
                total: 10,
                searchMap:{
                    page:1,
                    size: 5
                },
                dialogVisible :false,
                pojo:{}
            }
        },
        created(){
            //设置全局token
            const  token= localStorage.getItem("token");
            axios.defaults.headers.common['token']= token;
            this.fetchData();
        },
        methods:{
            timeFormat(row, column) {
                //日期格式化
                let datac = row[column.property];
                var time = new Date(datac);
                var year = time.getFullYear()
                var month = time.getMonth() + 1
                var date = time.getDate()
                var hours = time.getHours()
                var minutes = time.getMinutes()
                var seconds = time.getSeconds()

                function add0(m) {
                    return m < 10 ? '0' + m : m
                }

                var startTime = add0(year) + '-' + add0(month) + '-' + add0(date) + ' ' + add0(hours) + ':' + add0(minutes) + ':' + add0(seconds)
                return startTime
            },
            sizeChange(v){
                this.searchMap.size = v;
                this.fetchData();
            },
            fetchData(){
                axios.post(gatewayUrl +"/api/findPage",this.searchMap).then(function (resp) {
                    console.info(resp.data.code);

                    if(resp.data.code == -1){
                        window.location.href="/login.html"
                    }else{
                        brand.tableData  = resp.data.data.rows;
                        brand.total = resp.data.data.total;
                    }
                })
            },
            save(){
                axios.post(gatewayUrl + "/api/saveUser",this.pojo,{headers:{"token":this.token}}).then(res=>{
                    if(res.data.code == -1){
                        window.location.href="/login.html"
                    }else{
                        this.dialogVisible =false;
                        this.fetchData();
                    }

                })
            },
            edit(row){
                //打开框
                this.dialogVisible =true;
                //置空
                this.pojo={};
                this.pojo.id = row.id;
                this.pojo.username = row.username;
                this.pojo.password = row.password;
                this.pojo.age = row.age;
                this.pojo.createtime = row.createtime;
                //根据id查询对象  回显
                //axios.get(gatewayUrl + "/api/findById/"+id).then(res=>{
                //    brand.pojo = res.data;
                //})
            },
            dele(id){
                this.$confirm('确定要删除此记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then( () => {
                    axios.get(gatewayUrl + "/api/deleteById?id="+id,{headers:{"token":this.token}}).then(response => {
                        if(response.data.code==0){
                            console.info("11111111")
                            brand.searchMap.page=1;
                            brand.searchMap.size=5;
                            this.fetchData (); //刷新列表
                        }else{
                            if(response.data.code==-1){
                                window.location.href="/login.html"
                            }else{
                                this.$alert(response.data.errorMessage);
                            }
                        }
                    })
                })
            },
            add(){
                this.dialogVisible=true;
                this.pojo={};
            }
        }
    })
</script>
</body>
</html>